*{
    margin: 0;
    padding: 0;
}
.fade-in {
    opacity: 0;
    transform: translateY(10vw);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .content-block {
    background: #ffffff;
    border-radius: 8px;
  }



.topspace{
    height:8vw ;
}
 

 .logo{
  width: 100%;
  height: 100%;
  display: flex;
 }
 .logo img{
  height: 100%;
  margin: 0 0 0 1vw;
 }



  .header {
    height: 8vw;
    width: 100%;
  position: fixed;
  display: flex;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s ease-in-out;
  z-index: 1000;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.headerimg{
  width: 25vw;
  rotate: 3deg;
  position: absolute;
  left: 13.5vw;
  top: 1vw;
  overflow: hidden;
}



.hero {
  height: 47.5vw; 
  width: 90%;
  margin-left: 5%;
  background:linear-gradient(
    rgba(0, 0, 0, 0.0), 
    rgba(0, 0, 0, 0.0)
  ), url('photo/ESG永續發展 .png');
  background-size: 100% ; 
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn{
  display: flex;
  margin-right: 2vw;
}

.listbtn{
  width: 8vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(0, 0, 0);
  font-size: 1vw;
  margin: 1vw 0.7vw 1vw 0.7vw;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  z-index: 100;
 
}
.listbtn:hover{
  background-color: #000000;
  color: rgb(255, 255, 255);
}




.listbtng{
  width: 11vw;
  height: 3vw;
  color: rgb(0, 0, 0);
  font-size:1vw ;
  margin: 1vw ;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  font-family:Georgia, 'Times New Roman', Times, serif;
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.1vw;
}
.listbtng:hover{
  background-color: #000000;
  color: rgb(255, 255, 255);
}


.listicon{
  width: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
 
}


.wordspace{
  width: 0.2vw;
}





/*北屯區*/
.beitun{
  position: absolute;
  top: 58.2vw;
  left: 26.5vw;
  width:22vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(5px 8px 16px rgba(0, 0, 0, 0.3));
  }
  .beitun:hover{
    fill: black;
  }
 

  .beitunword{
    font-size: 1vw;
    fill: #000000 !important;
  transition: all 0.4s ease-in-out;

  }
  .beitunword:hover{
    font-size: 1.2vw;
     fill: #ffffff;
  }
  

  /*西屯區*/
.xitun{
  position: absolute;
  top: 59.8vw;
  left: 13.3vw;
  width:13.44vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
    
  }
  .xitun:hover{
    fill: black;
  }
  .xitunword{
    font-size: 1vw;
    fill:brown
  }

   /*南屯區*/
.nantun{
  position: absolute;
  top: 69vw;
  left: 11.85vw;
  width:12.7vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(-10px 8px 16px rgba(0, 0, 0, 0.3));
  }
  .nantun:hover{
    fill: black;
  }
  .nantunword{
    font-size: 1vw;
    fill:brown
  }

  /*北區*/
.bei{
  position: absolute;
  top: 66.6vw;
  left: 26.5vw;
  width:6.1vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
  }
  .bei:hover{
    fill: black;
  }
  .beiword{
    font-size: 5vw;
    fill:brown
  }

  /*西區*/
.xi{
  position: absolute;
  top: 70.8vw;
  left: 24.5vw;
  width:4.8vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
  }
  .xi:hover{
    fill: black;
  }
  .xiword{
    font-size: 5vw;
    fill:brown
  }

  /*中區*/
.mid{
  position: absolute;
  top: 72.5vw;
  left: 29vw;
  width:2vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
  }
  .mid:hover{
    fill: black;
  }
  .midword{
    font-size: 5vw;
    fill:brown
  }

   /*南區*/
.nan{
  position: absolute;
  top: 76.5vw;
  left: 23.5vw;
  width:6.1vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
  }
  .nan:hover{
    fill: black;
  }
  .nanword{
    font-size: 5vw;
    fill:brown
  }

  /*東區*/
.tun{
  position: absolute;
  top: 73vw;
  left: 31vw;
  width:4.5vw ;
  fill:rgb(255, 255, 255);
  transition: all 0.4s ease-in-out;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
  }
  .tun:hover{
    fill: black;
  }
  .tunword{
    font-size: 5vw;
    fill:brown
  }

  .second{
    width: 100%;
    height: 50vw;
    display: none;
  }

  .third{
    width: 100%;
    height: 110vw;
    background-color: #000000;
  }

  .note1{
    position: relative;
    width: 25vw;
    height: 30vw;
    left: 60vw;
    top: 6vw;
    z-index: 100;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
  }

  .sticky-note {
  width: 20vw;
  height: 18vw;
  padding: 2vw;
  margin: 2vw;
  cursor: pointer;
  
  /* 便利貼經典黃色與漸層（模擬光線從左上來） */
  background: #fefabc;
  background: linear-gradient(135deg, #fefabc 0%, #fff782 100%);
  
  /* 文字樣式 */
  font-family: "Klee One", "Microsoft JhengHei", cursive; /* 建議使用手寫感字體 */
  color: #333;
  line-height: 1.5;
  
  /* 關鍵：讓便利貼看起來歪歪的更真實 */
  transform: rotate(-2deg);
  
  /* 陰影：讓紙張看起來浮在平面上 */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  
  /* 為了讓捲角效果能定位 */
  position: relative;
  left: 60vw;
  top: 6vw;
  transition: transform 0.3s ease;
  display: none;
}

/* 懸停效果：滑鼠移上去時，便利貼會稍微「回正」並浮起來 */
.sticky-note:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
}

:root {
  --brand-gold: #d8c4a0; /* 定義圖片中的淺金色 */
}

.project-bean-section {
  /* 1. 設定背景圖片 (使用產生的 image_2.png) */
  background-image: url('photo/background01.png');
  
  background-size: cover;
  
  background-position: left top;
  
  background-repeat: no-repeat;
  
  background-color: #f4f4f4; 
  
  width: 100%;
  min-height: 800px;
}

.note{
  width: 45vw;
  position: relative;
  left: 50vw;
  top: 4vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}
.note img{
  width: 100%;
  
}

.note.active {
  opacity: 1;
  visibility: visible;
}

.note2{
  width: 45vw;
  position:absolute;
  left: 40vw;
  top: 55vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}
.note2 img{
  width: 110%;
  
}

.note2.active {
  opacity: 1;
  visibility: visible;
}


.note3{
  width: 45vw;
  position: absolute;
  left: 32vw;
  top: 56vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}
.note3 img{
  width: 130%;
  
}

.note3.active {
  opacity: 1;
  visibility: visible;
}







.cardbtn{
display: flex;
justify-content: center;
font-size: 1.2vw;
margin: 3vw;
}



.cardboss{
  display: block;
}
.card{
  display:flex ;
  align-items: center;
  justify-content: space-evenly;
  height: 40vw;
}

.flip-card-container {
  background-color: transparent;
  width: 20vw;  /* 設定卡片寬度 */
  height: 30vw; /* 設定卡片高度 */
  
  perspective: 1000px; 
  
  cursor: pointer; 
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
  
  transform-style: preserve-3d; 
  
  box-shadow: 0 6px 12px 0px rgba(0,0,0,0.2);
  border-radius: 2vw;
}

.flip-card-container.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  
  -webkit-backface-visibility: hidden; /* 相容 Safari */
  backface-visibility: hidden;
  
  border-radius: 2vw;
  overflow: hidden; 
}

.flip-card-front img, .flip-card-back img {
  width: 100%;
  height: 100%;
  
  object-fit: cover; 
}

.flip-card-front {
  background-color: #f4ece4; 
  color: #333;
}

.flip-card-back {
  background-color: #d8c4a0; 
  color: white;
  
  transform: rotateY(180deg); 
}

/*card2*/
.flip-card-container2 {
  background-color: transparent;
  width: 20vw;  /* 設定卡片寬度 */
  height: 30vw; /* 設定卡片高度 */
  
  /* 關鍵屬性：定義 3D 空間的距離感，數值越小，透視感越強烈 */
  perspective: 1000px; 
  
  cursor: pointer; /* 讓游標變成手指，提示可點擊 */
}
.flip-card-container2.is-flipped .flip-card-inner {
  transform: rotateY(180deg); /* 沿 Y 軸翻轉 */
}

/*card3*/
.flip-card-container3 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container3.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}






/*card4*/
.flip-card-container4 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container4.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}

/*card5*/
.flip-card-container5 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container5.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}

/*card6*/
.flip-card-container6 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container6.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}





/*card7*/
.flip-card-container7 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container7.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}

/*card8*/
.flip-card-container8 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container8.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}

/*card9*/
.flip-card-container9 {
  background-color: transparent;
  width: 20vw;  
  height: 30vw; 
  perspective: 1000px; 
  
  cursor: pointer; 
}
.flip-card-container9.is-flipped .flip-card-inner {
  transform: rotateY(180deg); 
}










/* 外層容器 */
.drag-slider {
  display: flex;
  align-items: center;
  height: 32vw;
  gap: 3vw; /* 圖片之間的間距 */
  padding: 1vw;
  overflow-x: auto; /* 允許橫向捲動 */
  
  /* 游標樣式：提示使用者這可以「抓取」 */
  cursor: grab; 
  
  /* 隱藏原生捲軸，讓畫面更乾淨 */
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
}

/* 隱藏 Chrome, Safari 的原生捲軸 */
.drag-slider::-webkit-scrollbar {
  display: none; 
}

/* 當滑鼠點擊按住時，把游標變成「抓緊」的狀態 */
.drag-slider.active {
  cursor: grabbing;
}

/* 單個圖片卡片 */
.slide-item {
  /* 關鍵：0 0 auto 防止卡片被 Flexbox 自動壓縮 */
  flex: 0 0 auto; 
  width: 20vw;  /* 卡片寬度 */
  height: 30vw; /* 卡片高度 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* ⚠️ 重要防呆：防止瀏覽器預設的「拖曳圖片出現半透明殘影」干擾我們的 JS */
  pointer-events: none; 
}


.mainphoto{
  width: 100%;
  height: 240vw;
}

.mainphoto img{
  width: 80%;
  margin-top: 3vw;
  margin-left: 10%;
}













.footer{
  width: 100%;
  height: 10vw;
  background-color: #4c974c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footerdiv{
  display: flex;
  justify-content: center;
}
.footer img{
  width:fit-content ;
  justify-content: center;
  height: 8vw;
}

.footericon{
    height: 6vw;background-color: black;display: none;justify-content: center;margin-bottom: 2vw;
  }
  .footericondiv{
    width: 40%;display: flex;justify-content: space-evenly;height: 2vw;margin-top: 2vw;transition: all 0.5s;
  }
  .footericondiv img{
    height: 100%;
    border-radius: 50%;
    border-width: 0.1vw;
    border-style: solid;
    border-color: white;
    cursor: pointer;
  }
  
  .footericon img:hover{
    border: none;
  }

  .footerword{
    font-size: 1vw;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: white;
    font-weight: lighter;
  }